<template>
	<view>
		<view class="w-100 flex align-center justify-center bg-muted position-relative mb-2" hover-class="bg-hover-muted"
		style="height: 420rpx;" @tap="upload">
			<image v-if="form.cover" :src="url+'/z_large'" mode="heightFix" style="height: 420rpx; width: 750rpx;"></image>
			<view class="flex flex-column align-center justify-center position-absolute right-0 left-0 top-0 bottom-0">
				<text v-if="!form.cover" class="iconfont iconjia text-muted" style="font-size: 50rpx;"></text>
				<text class="font text-main">点击{{form.cover?'更新':'添加'}}封面图</text>
			</view>
		</view>
		<view class="flex justify-center px-3">
			<uni-forms class="w-100" ref="form" :modelValue="form" :rules="rules1" validateTrigger="bind">
				<uni-forms-item label="封面" name="cover" class="w-100">
					<text class="font text-main" @tap="upload" style="line-height: 70rpx;">点击{{form.video?'更新':'添加'}}封面图</text>
					<uni-easyinput v-show="false" style="height: 0rpx;"  name="cover" type="number" v-model="form.cover" placeholder="请上传封面" />
				</uni-forms-item>
				<uni-forms-item label="标题" name="title" class="w-100">
					 <uni-easyinput name="title" type="text" v-model="form.title" placeholder="请输入标题" />
				</uni-forms-item>
				<uni-forms-item label="分类" name="category" class="w-100">
					 <uni-data-picker v-model="form.category" :localdata="categories" popup-title="请选择分类" ></uni-data-picker>
				</uni-forms-item>
				<uni-forms-item label="描述" name="description" class="w-100">
					 <uni-easyinput name="description" type="textarea" v-model="form.description" placeholder="请输入描述" />
				</uni-forms-item>
			</uni-forms>
		</view>
		
		<!-- 微信页面需要一个发布按钮 -->
		<view class="f-divider"></view>
		<view hover-class="bg-main-hover" class="bg-main text-white font rounded-circle text-center m-3"
		style="height: 80rpx; line-height: 80rpx;" @click="formSubmit">发布</view>
	</view>
</template>

<script>
	//定义表单规则
	var rules = [
		{name:"cover", checkType : "notnull", checkRule:"",  errorMsg:"封面不为空"},
		{name:"title", checkType : "notnull", checkRule:"",  errorMsg:"标题不为空"},
	    {name:"title", checkType : "string", checkRule:"1,10",  errorMsg:"标题应为1-5个字符"},
	    {name:"category", checkType : "notnull", checkRule:"",  errorMsg:"分类不为空"}
	];
	export default {
		data() {
			return {
				video_id:0,
				rules1: {
					// 对name字段进行必填验证
					cover: {rules: [{required: true,errorMessage: '请上传封面'}]},
					title: {rules: [{required: true,errorMessage: '请填写标题'}]},
					category: {rules: [{required: true,errorMessage: '请选择分类'}]},
				},
				form:{
					cover:null,//封面
					title:"新标题",//封面
					category:'',//分类
					description:"这是描述",//描述
				},
				categories:[]
			}
		},
		computed:{
			url(){
				return this.$H.common.sourceUrl + this.form.cover;
			}
		},
		onLoad(e) {
			if(e.id){
				this.video_id = parseInt(e.id);
				this.getVideo();
			}
			this.getCategorys();
			
		},
		onNavigationBarButtonTap(e) {
			//console.log("点击了"+e)
			this.formSubmit();
		},
		methods: {
			getVideo(){
				let url = `/video/${this.video_id}/edit`
				return this.$H.get(url,{token:true}).then(res=>{
					let f = this.form
					f.cover = res.cover;
					f.title = res.title;
					f.category = res.category_id;
					f.description = res.description;
				})
			},
			// 获取分类，并将其分别存在到categories，categories_id两个数组中
			getCategorys(){
				return this.$H.get('/category').then(res=>{
					this.categories.splice(0,this.categories.length);
					res.forEach(item=>{
						this.categories.push({
							text:item.title,
							value:item.id
						})
					})
				})
			},
			upload(){
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: res => {
				        //console.log(JSON.stringify(res.tempFilePaths));
						//this.form.cover = res.tempFilePaths[0]
						//console.log('res.tempFiles[0]=',res.tempFiles[0]);
						// let resType = res.tempFiles[0].type.substring(0,5)
						// if(resType!='image' || res.tempFiles[0].type.substring(6,7) == 'g'){
						//     uni.showToast({
						//         title: "限制图片类型以及过滤git图",
						//         icon: 'none',
						//         duration: 2000,
						//         mask: true
						//     });
						//     return
						// }
						let resSize = res.tempFiles[0].size;
						if (resSize > 5*1024*1024) {
							console.log('resSize=',resSize);
							uni.showToast({
								title: "图片大小不能超过5MB",
								icon: 'none',
								duration: 2000,
								mask: true
							});
							return
						}
						uni.showLoading({
							title: '上传中...',
							mask: true
						});
						this.$H.upload('/upload',{
							filePath: res.tempFilePaths[0]
						},{token:true}).then(res=>{
							this.form.cover = res.url;
							uni.hideLoading();
						}).catch(err=>{
							console.log(err);
							uni.hideLoading();
						})
				    }
				});
			},
			
			formSubmit(e) {
				//console.log('form发生了submit事件，携带数据为：' + JSON.stringify(this.form))
				//表单验证
				this.$refs.form.validate().then(res=>{
					// console.log('验证成功，form数据信息：', res);
					let url = this.video_id>0?`/video/${this.video_id}`:'/video';
					let title = this.video_id > 0? '修改作品成功':'创建作品成功'
					// console.log('url=',url);
					this.$H.post(url,{
						category_id: res.category,
						cover: res.cover,
						description: res.description,
						title: res.title
					},{token:true}).then(res=>{
						uni.showToast({title, icon:"none"});
						if(this.video_id > 0){
							setTimeout(()=>{
								uni.navigateBack();
							},500);
						}
						else{
							setTimeout(()=>{
								uni.redirectTo({
									url:'../my-videos/my-videos'
								})
							},500);
						}
					}).catch(err=>{
						uni.showToast({title:"创建作品失败"+JSON.parse(err), icon:"none"});
						console.log(err)
					})
				}).catch(err =>{
					console.log('验证失败，错误信息：', err);
					uni.showToast({
						title:'验证失败',
						icon:"none"
					})
				})
			},
		}
	}
</script>

<style>

</style>
